<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    img {
      display: block;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    #active a {
      color: white;
      font-weight: 700;
    }

    .sidebar-main {
      position: fixed;
      top: 165px;
      bottom: 200px;
      z-index: 9;
    }

    .read-section .sidebar-header {
      border-top-right-radius: 4px;
    }

    .sidebar-header {
      height: 40px;
      line-height: 40px;
      background: #333;
    }

    .sidebar-header-l {
      float: left;
      margin-left: 10px;
      font-size: 16px;
      color: #fff;
      font-style: normal;
    }

    .sidebar-header-r {
      float: right;
      margin-right: 15px;
      font-size: 14px;
      color: #fff;
      font-style: normal;
    }

    .read-section .sidebar-content {
      padding-left: 20px;
      bottom: 0;
      border-bottom-right-radius: 4px;
    }

    .sidebar-content {
      overflow-x: hidden;
      overflow-y: hidden;
      position: absolute;
      top: 40px;
      right: 0;
      left: 0;
      background: #3c3c3c;
    }

    .mCustomScrollBox {
      position: relative;
      overflow: hidden;
      height: 100%;
      max-width: 100%;
      outline: 0;
      direction: ltr;
    }

    .read-section .sidebar-content li {
      position: relative;
      height: 45px;
      line-height: 45px;
      padding-left: 10px;
    }

    .read-section .sidebar-content li a {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
      width: 80%;
      font-size: 14px;
      color: #b0b0b0;
    }

    .read-section .sidebar-btn {
      right: -40px;
      border-radius: 0 8px 8px 0;
    }

    .sidebar-btn {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 50px;
      margin-top: -50px;
      padding: 18px 0;
      text-align: center;
      font-size: 14px;
      line-height: 16px;
      color: #b0b0b0;
      background: #3c3c3c;
      cursor: pointer;
    }

    .sidebar-btn .read-icon-list {
      display: block;
      margin: 0 auto 10px;
    }

    .read-icon-list {
      width: 16px;
      height: 13px;
      background: url(https://cdn.517w.com/web_statics/v100/images/v1.3/read/djc-read-icon.png) 0 0 no-repeat;
    }
  </style>
</head>
<body onload="ua()">
<div class="read-section sidebar-main" style="left: 0px;width: 212px;">
  <div class="sidebar-header">
    <i class="sidebar-header-l">章节</i>
    <i class="sidebar-header-r">共{{chapter_num}}话</i>
  </div>
  <div class="sidebar-content">
    <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 551px;">
      <div class="mCustomScrollBox" style="overflow: hidden scroll; width: auto; height: 551px;">
        <ul id="directory">
          {{lis_html}}
        </ul>
      </div>
      <div class="slimScrollBar"
           style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 269.868px;"></div>
      <div class="slimScrollRail"
           style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
    </div>
  </div>
  <div class="sidebar-btn" onclick="togger()"><i class="read-icon-list"></i>章<br>节</div>
</div>
<div id="conntent" style="width: 600px; margin: 0 auto">
  {{imgs}}
</div>
<div style="text-align:center; padding:20px;font-size: 18px;font-weight: 700;"><a href="#" id="next_href"><font
    color="red">点我跳转到下一章</font></a></div>
<script>

  var ul = document.getElementById("directory").children;
  for (var i = 0; i < ul.length; i++)
    if (ul[i].textContent === document.title) {
      ul[i].id = 'active'
    }

  var div = document.getElementById("active");
  var nextDiv = div.nextSibling.nextSibling;
  next_href = nextDiv.firstChild.href;
  document.getElementById('next_href').href = next_href;


  function togger() {
    var read_section = document.getElementsByClassName("read-section")[0];
    if (read_section.offsetLeft === 0)
      read_section.style.left = '-212px';
    else
      read_section.style.left = '0px';
  }

  function ua() {
    new Viewer(document.getElementById('conntent'), {
      toolbar: {
        zoomIn: 4,
        zoomOut: 4,
        oneToOne: 4,
        reset: 4,
        prev: 4,
        play: {
          show: 4,
          size: 'large',
        },
        next: 4,
        rotateLeft: 4,
        rotateRight: 4,
        flipHorizontal: 4,
        flipVertical: 4,
      },
    });
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";//判断是否为iPad
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";//判断是否为iPhone用户
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
      console.log("当前是电脑打开")
    } else {
      document.getElementsByClassName("read-section")[0].style.left = '-212px';
      document.getElementById("conntent").style.width = '90%'
    }
  }

  // 定位到当前章节目录列表
  document.getElementById("active").scrollIntoView({"block": "center"});

</script>
</body>
</html>